<template>
  <div class="setting-center_tenement-info">
    <div class="header-info">
      <h3 :class="{ 'ml200': editCheck }"> </h3>
      <div>
        <el-button v-show="!editCheck" @click="editCheck = true">修改</el-button>
        <el-button v-show="editCheck" @click="editCheck = false">取消</el-button>
        <el-button v-show="editCheck" type="primary" @click="submit">保存</el-button>
      </div>
    </div>
    <div v-if="!editCheck" class="content-info">
      <img :src="params.logoFullPath" class="logo-img" alt="">
      <div class="detail-info">
        <el-row :gutter="30">
          <el-col :span="12">
            <div class="detail-row">
              <div>企业编码：</div>
              <label>{{ params.code }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>企业类型：</div>
              <label>{{ params.tenantType }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>企业简称：</div>
              <label>{{ params.sempleName }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>所属行业：</div>
              <label>{{ params.industryName }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>企业全称：</div>
              <label>{{ params.name }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>主体公司：</div>
              <label>{{ params.company }}</label>
            </div>
          </el-col>
          <el-col :span="12" style="height: 36px;">
            <div class="detail-row region-row">
              <div>所在地区：</div>
              <provinceCity v-if="cityArr.length> 0" ref="refProvinceCity" :city-arr="cityArr" :disabled="disableds" class="province-city" />
              <!-- <label>{{ params.province }}/{{ params.city }}/{{ params.county }}</label> -->
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>经营地址：</div>
              <label>{{ params.address }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>上级公司：</div>
              <label>{{ params.parentName }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>联系人：</div>
              <label>{{ params.contacts }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>联系手机：</div>
              <label>{{ params.phone1 }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>联系邮箱：</div>
              <label>{{ params.email }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>账户期限：</div>
              <label>{{ params.accountBegin }}至{{ params.accountEnd }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>账户状态：</div>
              <label>{{ params.publishStatus }}</label>
            </div>
          </el-col>
          <el-col :span="23">
            <div class="detail-row">
              <div>企业介绍：</div>
              <label>{{ params.introduce }}</label>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-else class="editForm" >
      <el-form :model="dataInfo" :rules="rules" label-position="right" label-width="6rem">
        <el-row :gutter="24">
          <el-col :span="2">
            <div class="icon-upload" style="max-width: 5px;max-height: 5px;margin-left: -5px;">
              <label>Logo:</label>
              <upload ref="upload" :limit="1" :file-list="fileList" :file-filter="filterImgType" :name-show="false" />
            </div>
          </el-col>
          <el-col :span="22">
          <div class="basics-info">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="企业编码：" prop="code">
                  <el-input v-model="dataInfo.code" disabled placeholder="请输入租户简称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业类型：" prop="tenantType">
                  <el-input v-model="dataInfo.tenantType" disabled placeholder="请输入租户简称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业简称：" prop="sempleName">
                  <el-input v-model="dataInfo.sempleName" disabled placeholder="请输入租户简称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经营类目：" prop="businessCategory">
                  <el-input v-model="dataInfo.businessCategory" disabled placeholder="请输入租户简称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业全称：" prop="name">
                  <el-input v-model="dataInfo.name" placeholder="请输入租户全称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="主体公司：" prop="company">
                  <el-input v-model="dataInfo.company" disabled placeholder="请输入租户全称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所在地区：">
                  <provinceCity v-if="cityArr.length> 0" ref="refProvinceCity" :city-arr="cityArr" />
                  <!-- <el-input v-model="dataInfo.name" :disabled="disabled" placeholder="登陆账号" /> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经营地址：" prop="address">
                  <el-input v-model="dataInfo.address" placeholder="请输入经营地址" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="上级公司：">
                  <el-input v-model="dataInfo.parentName" disabled placeholder="请输入集团公司" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人：">
                  <el-input v-model="dataInfo.contacts" placeholder="请输入联系人" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系手机：" prop="phone1">
                  <el-input v-model="dataInfo.phone1" placeholder="请输入联系手机" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系邮箱：" prop="email">
                  <el-input v-model="dataInfo.email" placeholder="请输入联系邮箱" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账户期限：">
                  <el-input v-model="accounts" disabled placeholder="请输入联系座机" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账户状态：" prop="publishStatus">
                  <el-input v-model="dataInfo.publishStatus" disabled placeholder="请输入联系座机" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="企业介绍：" prop="introduce">
                  <el-input v-model="dataInfo.introduce" type="textarea" :row="4" placeholder="请输入租户介绍" />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="24">
                <el-form-item label="企业Logo：" prop="img">
                  <upload :disabled="false" :limit="1" :file-filter="filterImgType" :name-show="false" />
                </el-form-item>
              </el-col> -->
            </el-row>
          </div>
        </el-col>
       </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import upload from '@/components/upload'
import { getTenant, getTenantSave } from '@/api/tenement'
import provinceCity from '@/components/provinceCity'
export default {
  components: {
    upload,
    provinceCity
  },
  data() {
    return {
      cityArr: [],
      fileList: [],
      disableds: true,
      dataInfo: {},
      rules: {},
      filterImgType: ['jpg', 'jpeg', 'png', 'icon', 'gif', 'bmp', 'JPG', 'JPEG', 'PNG', 'ICON', 'GIF', 'BMP'],
      editCheck: false,
      params: {}
    }
  },
  computed: {
    accounts() {
      var account = this.dataInfo.accountBegin + '至' + this.dataInfo.accountEnd
      return account
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    submit() {
      if (this.$refs.upload.key && this.$refs.upload.key.length > 0) {
        this.params.logo = this.$refs.upload.key[0].urlName
        this.dataInfo.logo = this.$refs.upload.key[0].urlName
      }
      getTenantSave(this.dataInfo).then(res => {
        this.$message.success('保存成功！')
        this.editCheck = false
        this.getInfo()
      })
    },
    getInfo() {
      getTenant({}).then(response => {
        this.params = response
        this.dataInfo = response
        this.cityArr = [response.province.toString(), response.city.toString(), response.county.toString(), response.streetTown.toString()]
        if (response.logo) {
          this.fileList.push({
            url: response.logoFullPath
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .setting-center_tenement-info {
    .region-row{
      height: 36px;
      .province-city{
        flex: 1;
        input{
          border: none;
          background: none;
          padding: 0;
        }
        .el-input__icon{
          &:before{
            display: none;
          }
        }
      }
    }
 .icon-upload {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-right: 30px;
   >label {
     margin-bottom: 10px;
     span {
       color: #ff4949;
     }
   }
   .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 5px;
     margin: 0 30px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     .avatar-uploader-icon {
       font-size: 28px;
       color: #8c939d;
       width: 150px;
       height: 150px;
       line-height: 150px;
       text-align: center;
     }
   }
 }
    .header-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1280px;
      margin: 0 auto 30px;
      .ml200 {
       margin-left: 200px;
       align-items: center;
      }
    }

    .content-info {
      display: flex;
      max-width: 1280px;
      margin: 0 auto;
      .logo-img {
        width: 100px;
        height: 100px;
        margin: 0 30px;
      }

      .detail-row {
        display: flex;
        font-size: 14px;
        color: #6d6d6d;
        line-height: 36px;
        // margin-bottom: 20px;

        >div {
          min-width: 5rem;
          text-align: right;
          margin-right: 10px;
        }

        >label {
          color: #b7b7b7;
          margin-left: 0.3rem;
        }
      }
    }
    .editForm {
      max-width:900px;
      margin: 0 auto;
    }
  }
</style>
